<template>
<div class="time">
      <div class="month" @click="datahang" :class="isCollapse === true? 'lc':''">月份</div>
      <div class="data" :class="isCollapse === true? '':'lc'"  @click="datahang">日期</div>
                <div class="block">
                  <el-date-picker
                 v-if="isCollapse"
                  v-model="value2"
                  type="data"
                  placeholder="2022-10"
                  />
                  <div class="demo-data-picker" v-else>
                  <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="2015-10-02"
                  end-placeholder="2015-10-10"
                  :size="size"
                />
                </div>
               </div>
               <el-select v-model="value" class="m-2" placeholder="地区">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                   />
                 </el-select>
                 <input type="text">
               <el-button type="primary" class="answer">查询</el-button>
     </div>
  <div class="list">
              <el-table :data="datalist4" stripe style="width: 100%">
               <el-table-column prop="sort" label="序号" width="50" />
               <el-table-column prop="address" label="地区" width="100" />
               <el-table-column prop="school" label="学校名称" />
               <el-table-column prop="num" label="合计" />
               <el-table-column prop="courseSelectionNotice" label="通知" />
               <el-table-column prop="announcement" label="公告" />
               <el-table-column prop="activity" label="活动" />
               <el-table-column prop="homeMission" label="家园任务" />
               <el-table-column prop="noticeOfPayment" label="缴费通知" />
               <el-table-column prop="operation" label="选课通知" />
               <el-table-column prop="askForLeave" label="请假" />
               <el-table-column prop="releaseAlbum" label="发布相册" />
               <el-table-column prop="vote" label="投票" />
             
               </el-table>
  
  </div>
</template>

<script setup>

import { backtopEmits } from "element-plus"

  var isCollapse = ref(false)
  var datahang =()=>{
    isCollapse.value = !isCollapse.value
   
  }
  const options = [
  {value:'地区',
  label:'地区',},
  {value:'学校',
  label:'学校',}
  ]


  //a,导入接口
  import server from '@/api/index'
  var datalist4 = ref()
  
  import { onMounted, ref } from 'vue'; 
 //消息发布列表
 onMounted(async()=>{
  //学校月消息发布排行
  var res4 =  await server.xiaoxitongji.messageStatistics_schoolmsgnum()
    datalist4.value = res4.data.data
    console.log(datalist4);
 })
  
</script>

<style scoped>
.time{
  display: flex;
}
.time .block{
    margin-right: 20px;
  }
  .time .month{
    width: 80px;
    height: 30px;
    border: 1px solid #a6a2a2;
    border-radius: 5px;
  }
   .time .data{
    width: 80px;
    height: 30px;
    border: 1px solid #a6a2a2;
    border-radius: 5px;
    }
    .time .block{
      margin-left: 15px;
    }
    .time .answer{
      color: white;
  
    }
    .active{
      background-color: red;
    }
 
   .lc{
    background-color: #239ffe;
    color: white;
   }
   .m-2{
    width: 100px;
   }
   input{
    margin-left: 15px;
   }
 
</style>